import { useSelector } from 'react-redux';
import { useDispatch } from 'react-redux';
import { increase, decrease, addToNum } from '../store/modules/counterStore';

const Counter = () => {

  const { count } = useSelector(state => state.counter);

  const dispatch = useDispatch();

    
  const handleMinus = () => {
    dispatch(decrease());
  };
  const handlePlus = () => {
    dispatch(increase());
  };

  return (
    <div className="flex flex-col gap-[10px] w-fit mx-auto mt-[50px]">
      <div className="flex gap-[10px] p-[10px] items-center">
        <button className="text-[18px] w-[44px] select-none cursor-pointer py-[8px] bg-gray-300 active:bg-gray-400 rounded-[10px]" onClick={handleMinus}>-</button>
        <p className="text-[20px] select-none">{count}</p>
        <button className="text-[18px] w-[44px] select-none cursor-pointer py-[8px] bg-gray-300 active:bg-gray-400 rounded-[10px]" onClick={handlePlus}>+</button>
      </div>
      <div className="flex flex-col gap-[10px]">
        <button className="w-full bg-green-400 active:bg-green-500 select-none cursor-pointer py-[4px] rounded-[6px]" onClick={() => {dispatch(addToNum(10))}}>增加到10</button>
        <button className="w-full bg-blue-400 active:bg-blue-500 select-none cursor-pointer py-[4px] rounded-[6px]" onClick={() => {dispatch(addToNum(20))}}>增加到20</button>
      </div>
    </div>
  );
};

export default Counter;